<!-- props扩展字段组件 -->
<template>
  <a-form-item
    label="占位符字"
    v-if="props.showFieldList?.includes('placeholder')"
  >
    <a-input
      :disabled="disabled"
      placeholder="输入文本占位符"
      v-model="props.props.placeholder"
    />
  </a-form-item>
  <a-form-item label="最大字数" v-if="props.showFieldList?.includes('textMax')">
    <a-input-number
      :disabled="disabled"
      placeholder="请输入文本最大字数"
      v-model="props.props.textMax"
      :min="1"
    />
  </a-form-item>
  <a-form-item
    label="布局方式"
    v-if="props.showFieldList?.includes('detailTable')"
  >
    <a-space direction="vertical" size="large">
      <a-radio-group v-model="props.props.layout">
        <a-radio :value="1">表格</a-radio>
        <a-radio :value="2">表单</a-radio>
      </a-radio-group>
    </a-space>
  </a-form-item>
  <!-- 下拉选择设置 -->
  <a-form-item
    label="选项设置"
    v-if="props.showFieldList?.includes('selectOptions')"
  >
    <a-space direction="vertical">
      <a-space fill>
        <div>key类型</div>
        <a-radio-group v-model="props.props.keyType" @change="keyTypeChange(1)">
          <a-radio :value="0">数字</a-radio>
          <a-radio :value="1">字符串</a-radio>
        </a-radio-group>
      </a-space>
      <a-tabs v-model:active-key="props.props.dataSourcesType">
        <a-tab-pane :key="0" title="自定义">
          <a-space direction="vertical">
            <a-space
              v-for="(option, index) in props.props.selectOptions"
              :key="index"
            >
              key
              <a-input
                :disabled="disabled"
                v-model="option.value"
                :placeholder="'key'"
              />
              value
              <a-input
                :disabled="disabled"
                v-model="option.label"
                :placeholder="'选项值'"
                allow-clear
              />
              <a-button
                type="primary"
                status="danger"
                shape="circle"
                size="mini"
                @click="delSelectOption(index)"
              >
                <icon-delete />
              </a-button>
            </a-space>
            <a-space>
              <a-link @click="addSelectOption">添加选项</a-link>
            </a-space>
          </a-space>
        </a-tab-pane>
        <a-tab-pane :key="1" title="数据来源">
          <CtlDataResourcesModal
            v-model:id="props.props.dataResourcesId"
            :dataSourcesName="dataSourcesName"
          />
        </a-tab-pane>
      </a-tabs>
    </a-space>
  </a-form-item>
  <!-- 单选选项设置 -->
  <a-form-item
    label="选项设置"
    v-if="props.showFieldList?.includes('radioOptions')"
  >
    <a-space direction="vertical">
      <a-space fill>
        <div>key类型</div>
        <a-radio-group v-model="props.props.keyType" @change="keyTypeChange(2)">
          <a-radio :value="0">数字</a-radio>
          <a-radio :value="1">字符串</a-radio>
        </a-radio-group>
      </a-space>
      <a-tabs v-model:active-key="props.props.dataSourcesType">
        <a-tab-pane :key="0" title="自定义">
          <a-space direction="vertical">
            <a-space
              v-for="(option, index) in props.props.radioOptions"
              :key="index"
            >
              key
              <a-input
                :disabled="disabled"
                v-model="option.value"
                :placeholder="'key'"
                allow-clear
              />
              value
              <a-input
                :disabled="disabled"
                v-model="option.label"
                :placeholder="'选项值'"
                allow-clear
              />
              <a-button
                type="primary"
                status="danger"
                shape="circle"
                size="mini"
                @click="delRadioOption(index)"
              >
                <icon-delete />
              </a-button>
            </a-space>
            <a-space>
              <a-link @click="addRadioOption">添加选项</a-link>
            </a-space>
          </a-space>
        </a-tab-pane>
        <a-tab-pane :key="1" title="数据来源">
          <CtlDataResourcesModal
            v-model:id="props.props.dataResourcesId"
            :dataSourcesName="dataSourcesName"
          />
        </a-tab-pane>
      </a-tabs>
    </a-space>
  </a-form-item>
  <!-- 复选选项设置 -->
  <a-form-item
    label="选项设置"
    v-if="props.showFieldList?.includes('checkBoxOptions')"
  >
    <a-space direction="vertical">
      <a-space fill>
        <div>key类型</div>
        <a-radio-group v-model="props.props.keyType" @change="keyTypeChange(3)">
          <a-radio :value="0">数字</a-radio>
          <a-radio :value="1">字符串</a-radio>
        </a-radio-group>
      </a-space>
      <a-tabs v-model:active-key="props.props.dataSourcesType">
        <a-tab-pane :key="0" title="自定义">
          <a-space direction="vertical">
            <a-space
              v-for="(option, index) in props.props.checkOption"
              :key="index"
            >
              key
              <a-input
                :disabled="disabled"
                v-model="option.value"
                :placeholder="'key'"
              />
              value
              <a-input
                :disabled="disabled"
                v-model="option.label"
                :placeholder="'选项值'"
                allow-clear
              />
              <a-button
                type="primary"
                status="danger"
                shape="circle"
                size="mini"
                @click="delCheckOption(index)"
              >
                <icon-delete />
              </a-button>
            </a-space>
            <a-space>
              <a-link @click="addCheckOption">添加选项</a-link>
            </a-space>
          </a-space>
        </a-tab-pane>
        <a-tab-pane :key="1" title="数据来源">
          <CtlDataResourcesModal
            v-model:id="props.props.dataResourcesId"
            :dataSourcesName="dataSourcesName"
          />
        </a-tab-pane>
      </a-tabs>
    </a-space>
  </a-form-item>
  <a-form-item
    label="格式校验"
    v-if="props.showFieldList?.includes('validate')"
  >
    <a-select
      :disabled="disabled"
      placeholder="选择校验类型"
      v-model="props.props.validate"
    >
      <a-option value="bank" label="银行卡号" />
      <a-option value="phone" label="手机号码" />
      <a-option value="email" label="邮箱" />
      <a-option value="wxNumber" label="微信号码" />
    </a-select>
  </a-form-item>
  <!-- 文件上传 -->
  <div v-if="props.showFieldList?.includes('upload')">
    <UploadExtended
      v-model:limit="props.props.limit"
      v-model:file-max-size="props.props.fileMaxSize"
    />
  </div>
  <a-form-item label="超链接" v-if="props.showFieldList?.includes('button')">
    <a-textarea
      :disabled="disabled"
      placeholder="超链接跳转地址"
      v-model="props.props.url"
    />
  </a-form-item>
</template>

<script setup lang="ts">
import { getDataResourcesById } from '@/apis/dataSources';
import CtlDataResourcesModal from '@/components/CtlDataResourcesModal.vue';
import clonedeep from 'lodash.clonedeep';
import UploadExtended from './config/UploadExtended.vue';

// const emit = defineEmits(["propsChange"]);
const props = defineProps<{
  props?: any; //控件的props
  showFieldList?: string[]; //控件可以设置的字段名
  uuid: string; //控件的uuid
}>();

const copyProps = ref<any>({}); //cope一份props
// watch(
//   //监听uuid改变复制Props
//   () => props.props.uuid,
//   () => {
//     props.props = clonedeep(props.props.props);
//   }
// );

/**
 * props改变
 */
const propsChange = () => {
  console.log(props.props.layout);
  // emit("propsChange", props.props);
};
const keyTypeChange = (type: number) => {
  //type:1选择2单选3复选
  if (type === 1) {
    if (
      typeof props.props.selectOptions !== 'object' ||
      !props.props.selectOptions.length
    ) {
    } else {
      props.props.selectOptions.forEach((item: any) => {
        item.value = props.props.keyType
          ? item.value.toString()
          : Number(item.value);
      });
    }
  }
  if (type === 2) {
    if (
      typeof props.props.radioOptions !== 'object' ||
      !props.props.radioOptions.length
    ) {
    } else {
      props.props.radioOptions.forEach((item: any) => {
        item.value = props.props.keyType
          ? item.value.toString()
          : Number(item.value);
      });
    }
  }
  if (type === 3) {
    if (
      typeof props.props.checkBoxOptions !== 'object' ||
      !props.props.checkBoxOptions.length
    ) {
    } else {
      props.props.checkBoxOptions.forEach((item: any) => {
        item.value = props.props.keyType
          ? item.value.toString()
          : Number(item.value);
      });
    }
  }
  console.log(props.props.keyType);

  // propsChange();
};
const disabled = ref(false);
// 添加下拉选项
const addSelectOption = () => {
  let value;
  if (props.props.selectOptions) {
    value = props.props.selectOptions.length + 1;
  } else {
    // Reflect.set(props.props as object, "selectOptions", []);
    props.props.selectOptions = [];
    value = 1;
  }
  // let value = props.props.selectOptions.length + 1;
  // let obj = { value, label: `选项${value}` }
  let obj = { value, label: '' };
  props.props.selectOptions.push(obj);
  propsChange();
};
// 删除复选框选项
const delSelectOption = (index: number) => {
  props.props.selectOptions.splice(index, 1);
  propsChange();
};
// 添加单选框选项
const addRadioOption = () => {
  let value;
  if (props.props.radioOptions) {
    value = props.props.radioOptions.length + 1;
  } else {
    props.props.radioOptions = [];
    value = 1;
  }
  // let obj = { value, label: `选项${value}` }
  let obj = { value, label: '' };
  props.props.radioOptions.push(obj);
  propsChange();
};
// 删除单选框选项
const delRadioOption = (index: number) => {
  props.props.radioOptions.splice(index, 1);
  propsChange();
};

// 添加复选框选项
const addCheckOption = () => {
  let value;
  if (props.props.checkOption) {
    value = props.props.checkOption.length + 1;
  } else {
    props.props.checkOption = [];
    value = 1;
  }
  // let obj = { value, label: `选项${value}` }
  let obj = { value, label: '' };
  props.props.checkOption.push(obj);
  propsChange();
};

// 删除复选框选项
const delCheckOption = (index: number) => {
  // props.props.checkOption.splice(index, 1);
  // propsChange();
};
const dataSourcesName = ref('');
const getDataResources = async () => {
  dataSourcesName.value = '';
  if (!props.props?.dataResourcesId) {
    propsChange();
    return;
  }
  const res = await getDataResourcesById(props.props.dataResourcesId);
  dataSourcesName.value = res.dataResourcesDetail.dataResourcesName;
};
watch(
  () => props.props?.dataResourcesId,
  (val) => {
    getDataResources();
  },
  { immediate: true }
);
</script>

<style scoped lang="less"></style>
